<template>
  <div>
    <div class="wb-main">
      <div class="wb-header">
        <!-- <el-button size="mini" class="wb-header-btn" @click="onSearchBtn">搜索</el-button> -->
        <el-button size="mini" class="wb-header-btn" type="primary" @click="addCustomer">新增</el-button>
      </div>
      <div class="wb-table-wrap">
        <el-table
          v-loading="loading"
          class="wb-table"
          border
          :data="dataSource"
        >
          <!-- <el-table-column label="序号" type="index" width="90px" /> -->

          <el-table-column label="logo" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 30px; height: 30px"
                :src="jointURL(scope.row.logo)"
                :preview-src-list="[jointURL(scope.row.logo)]"
              />
            </template>
          </el-table-column>

          <el-table-column label="品牌名称" width="150px" prop="name" show-overflow-tooltip />
          <el-table-column label="更新时间" width="150px" prop="updateTime" show-overflow-tooltip />

          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              {{ scope.row.status?'启用':'禁用' }}
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="200px"
          >
            <template slot-scope="scope">

              <el-button-group>

                <el-button icon="el-icon-edit" size="mini" @click="goToEdit(scope.row)">编辑</el-button>

                <el-button icon="el-icon-delete" size="mini" @click="deleteBtn(scope.row)">删除</el-button>

              </el-button-group>

            </template>
          </el-table-column>
        </el-table>
        <!-- <div class="pagination-container">
          <el-pagination
            v-if="page.total>10"
            :page-sizes="[10, 50, 100, 200]"
            :current-page.sync="page.pageNum"
            :page-size="page.size"
            :total="page.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div> -->
      </div>
    </div>

    <!-- <customer-details ref="customerDetails" :data="editData" @callBack="submitCustomerBtn" /> -->

    <t-prompt
      ref="prompt"
      key="sales"
      spec="3"
      :prompt-title="dataForm.id?'编辑品牌':'新增品牌'"
      :append-to-body="true"
      :is-validation="true"
      @submitBtn="submitBtn"
    >
      <el-form ref="brandForm" :model="dataForm" label-width="100px" :rules="rules">

        <el-form-item label="logo" prop="logo">
          <pic-upload v-model="dataForm.logo" />
        </el-form-item>

        <el-form-item label="名称" prop="name">
          <el-input v-model="dataForm.name" style="width:200px" placeholder="请输入品牌名称" />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="dataForm.status"
          />
        </el-form-item>

      </el-form>
    </t-prompt>

  </div>
</template>

<script>
import TPrompt from '@/components/TPrompt/index.vue'
import brandApi from '@/api/brand'
import PicUpload from '@/components/pic-upload'
export default {
  components: {
    TPrompt,
    PicUpload
  },
  data() {
    return {
      page: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      loading: false,
      dataSource: [],
      dataForm: {
        status: null,
        name: null,
        logo: null,
        id: null
      },
      rules: {
        status: {
          required: true, message: '请设置状态', trigger: 'blur'
        },
        name: {
          required: true, message: '请输入名称', trigger: 'blur'
        },
        logo: {
          required: true, message: '请选择logo', trigger: 'blur'
        }
      }
    }
  },
  mounted() {
    this.brandList()
  },
  methods: {
    // 新增
    addCustomer() {
      this.dataForm = {
        status: null,
        name: null,
        logo: null,
        id: null
      }
      this.$refs.prompt.openDiglog()
    },
    jointURL(url) {
      return process.env.VUE_APP_BASE_API + url
    },
    brandList() {
      // const formData = {
      //   ...this.page,
      //   ...this.formData
      // }
      this.loading = true
      brandApi.brandList().then((res) => {
        this.loading = false
        const records = res.data
        this.dataSource = records
        // this.page.total = res.data.total
      }).catch(() => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.page = {
        ...this.page,
        pageNum: 1,
        pageSize: val
      }
      // this.getListData()
    },
    handleCurrentChange(val) {
      this.page = {
        ...this.page,
        pageNum: val
      }
      // this.getListData()
    },
    onSearchBtn() {
      this.page.pageNum = 1
      this.brandList()
    },
    goToEdit(data) {
      this.dataForm = {
        ...data
      }
      this.$refs.prompt.openDiglog()
    },

    // 设置业务员
    submitBtn() {
      this.$refs.brandForm.validate((valid) => {
        if (valid) {
          brandApi.createBrand(this.dataForm).then(() => {
            this.$message({
              type: 'success',
              message: this.dataForm.id ? '编辑品牌成功' : '新增品牌成功'
            })
            this.$refs.prompt.cancelBtn()
            this.onSearchBtn()
          })
        }
      })
    },
    // 删除客户
    deleteBtn(row) {
      this.$confirm('此操作将永久删除该品牌, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        brandApi.deleteBrand(row.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.onSearchBtn()
        })
      })
    }
  }
}

</script>

<style lang="scss" scoped>

</style>
